import Vue from 'vue';
import { user } from '@/plugins/user';
import { session } from '@/plugins/storage';
import VueRouter, { RouteConfig } from 'vue-router';

const LoginPage = () => import(/* webpackChunkName: "group-common" */ './views/login.vue');
const RegisterPage = () => import(/* webpackChunkName: "group-common" */ './views/login_reg.vue');
const ForgetPwdPage = () => import(/* webpackChunkName: "group-common" */ './views/login_pwd.vue');
const NotFoundPage = () => import(/* webpackChunkName: "group-common" */ './views/not_found.vue');

const MenuPage = () => import(/* webpackChunkName: "home" */ './views/page_menu.vue');
const BlankPage = () => import(/* webpackChunkName: "home" */ './views/page_blank.vue');

const Home = () => import(/* webpackChunkName: "home" */ './views/home/Home.vue');
const SysTest = () => import(/* webpackChunkName: "home-sys" */ './views/home/sys/Test.vue');
const FormForm = () => import(/* webpackChunkName: "home-form" */ './views/home/form/Form.vue');
const FormEdit = () => import(/* webpackChunkName: "home-form" */ './views/home/form/FormEdit.vue');
const DataTable = () => import(/* webpackChunkName: "home-data" */ './views/home/data/Table.vue');
const DataEcharts = () => import(/* webpackChunkName: "home-data" */ './views/home/data/Echarts.vue');

Vue.use(VueRouter);

// 暴露 路由规则（菜单部分）
export const menus: RouteConfig[] = [{
  path: '/home',
  name: '首页',
  component: Home,
  meta: {
    icon: "el-icon-menu",
    roles: ['none']
  }
}, {
  path: '/data',
  name: '数据展示',
  component: BlankPage,
  meta: {
    icon: "el-icon-setting",
    roles: ['none']
  },
  children: [{
    path: '/data/table',
    name: '表格页面',
    component: DataTable,
    meta: {
      icon: "el-icon-location",
      roles: ['none']
    }
  }, {
    path: '/data/echarts',
    name: 'Echarts',
    component: DataEcharts,
    meta: {
      icon: "el-icon-location",
      roles: ['none']
    }
  }]
}, {
  path: '/form',
  name: '表单数据',
  component: BlankPage,
  meta: {
    icon: "el-icon-setting",
    roles: ['none']
  },
  children: [{
    path: '/form/form',
    name: '表单数据',
    component: FormForm,
    meta: {
      icon: "el-icon-location",
      roles: ['none']
    }
  }, {
    path: '/form/edit',
    name: '富文本',
    component: FormEdit,
    meta: {
      icon: "el-icon-location",
      roles: ['none']
    }
  }]
}, {
  path: '/sys',
  name: '系统管理',
  component: BlankPage,
  meta: {
    icon: "el-icon-setting",
    roles: ['none']
  },
  children: [{
    path: '/sys/test',
    name: '测试页面',
    component: SysTest,
    meta: {
      icon: "el-icon-location",
      roles: ['none']
    }
  }]
}];

// 定义路由规则
const router = new VueRouter({
  routes: [{
    path: '/',
    children: menus,
    redirect: '/home',
    component: MenuPage
  }, {
    path: '/404',
    component: NotFoundPage,
    meta: {
      whitelist: true
    }
  }, {
    path: '/login',
    component: LoginPage
  }, {
    path: '/register',
    component: RegisterPage,
    meta: {
      whitelist: true
    }
  }, {
    path: '/forgetpwd',
    component: ForgetPwdPage,
    meta: {
      whitelist: true
    }
  }, {
    path: '*',
    redirect: '/404'
  }],
});

// 路由跳转时，判断登录信息
router.beforeEach((to, from, next) => {
  // 如果 白名单 -> 放行
  if (to.meta && to.meta.whitelist) {
    return next();
  }

  // 获取请求 & 登录状态
  const login1 = to.path === '/login';
  const login2 = user.login;

  if (login1 && login2) return next(from); // 目标页:登录 & 已登录
  if (login1 && !login2) return next(); // 目标页:登录 & 未登录

  // 缓存请求信息
  session.save('route-to-params', to.params);
  session.save('route-to-query', to.query);
  session.save('route-to-path', to.path);

  // 未登录->登录;已登录->放行;
  if (!login2) {
    return next('/login');
  } else {
    return next();
  }
});

// 默认暴露 路由配置
export default router;
